<template>
  <div class="pricing-page min-h-screen bg-gradient-to-br from-gray-50 via-white to-primary-50 dark:from-gray-900 dark:via-gray-900 dark:to-gray-800">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <!-- 页面标题 -->
      <div class="text-center mb-16">
        <h1 class="text-5xl md:text-6xl font-bold mb-4 animate-fade-in">
          <span class="gradient-text">选择适合你的套餐</span>
        </h1>
        <p class="text-xl text-gray-600 dark:text-gray-400">
          解锁更多功能，提升开发效率 🚀
        </p>
        
        <!-- 当前套餐信息 -->
        <div v-if="authStore.isLoggedIn && authStore.user" class="mt-6">
          <div v-if="authStore.user.subscriptionType !== 'free'" class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500/10 to-emerald-500/10 border border-green-500/20 rounded-full">
            <Icon name="heroicons:check-badge" class="w-5 h-5 text-green-600 dark:text-green-400" />
            <span class="text-green-700 dark:text-green-300 font-medium">
              当前套餐：{{ authStore.user.subscriptionType === 'basic' ? '基础会员' : '高级会员' }} 
              <span class="text-sm opacity-75">（{{ formatDate(authStore.user.subscriptionEndDate) }} 到期）</span>
            </span>
          </div>
          <div v-else class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 dark:bg-gray-800 rounded-full">
            <Icon name="heroicons:user" class="w-5 h-5 text-gray-600 dark:text-gray-400" />
            <span class="text-gray-700 dark:text-gray-300 font-medium">当前为免费用户</span>
          </div>
        </div>
      </div>

      <!-- 会员权益对比表 -->
      <section class="mb-16 max-w-6xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12">
          <span class="gradient-text">会员权益对比</span>
        </h2>
        
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden">
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead>
                <tr class="border-b-2 border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                  <th class="text-left py-5 px-6 text-gray-700 dark:text-gray-300 font-semibold">功能权益</th>
                  <th class="text-center py-5 px-6">
                    <div class="font-bold text-gray-600 dark:text-gray-400">免费用户</div>
                  </th>
                  <th class="text-center py-5 px-6">
                    <div class="inline-flex items-center gap-2 font-bold text-blue-600 dark:text-blue-400">
                      <Icon name="heroicons:star" class="w-5 h-5" />
                      基础会员
                    </div>
                  </th>
                  <th class="text-center py-5 px-6">
                    <div class="inline-flex items-center gap-2 font-bold">
                      <Icon name="heroicons:star-solid" class="w-5 h-5 text-yellow-500" />
                      <span class="bg-gradient-to-r from-yellow-500 to-orange-500 bg-clip-text text-transparent">
                        高级会员
                      </span>
                    </div>
                  </th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                <!-- 基础功能 -->
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">浏览免费工具</td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
                
                <!-- 会员专属工具 -->
                <tr class="hover:bg-blue-50/30 dark:hover:bg-blue-900/10 transition-colors bg-blue-50/20 dark:bg-blue-900/5">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">
                    <div class="flex items-center gap-2">
                      <Icon name="heroicons:star" class="w-4 h-4 text-blue-600" />
                      <span class="font-medium">访问会员专属工具</span>
                    </div>
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
                
                <!-- 收藏数量 -->
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">工具收藏数量</td>
                  <td class="text-center py-4 px-6 text-gray-600 dark:text-gray-400">10 个</td>
                  <td class="text-center py-4 px-6 text-blue-600 dark:text-blue-400 font-semibold">50 个</td>
                  <td class="text-center py-4 px-6 text-yellow-600 dark:text-yellow-400 font-semibold">无限制</td>
                </tr>
                
                <!-- 无广告 -->
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">无广告浏览</td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
                
                <!-- 客服支持 -->
                <tr class="hover:bg-yellow-50/30 dark:hover:bg-yellow-900/10 transition-colors bg-yellow-50/20 dark:bg-yellow-900/5">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">
                    <div class="flex items-center gap-2">
                      <Icon name="heroicons:chat-bubble-left-right" class="w-4 h-4 text-yellow-600" />
                      <span class="font-medium">专属客服支持</span>
                    </div>
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <span class="text-sm text-gray-600 dark:text-gray-400">工作日</span>
                  </td>
                  <td class="text-center py-4 px-6">
                    <span class="text-sm font-semibold text-yellow-600 dark:text-yellow-400">7×24小时</span>
                  </td>
                </tr>
                
                <!-- API访问 -->
                <tr class="hover:bg-yellow-50/30 dark:hover:bg-yellow-900/10 transition-colors bg-yellow-50/20 dark:bg-yellow-900/5">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">
                    <div class="flex items-center gap-2">
                      <Icon name="heroicons:code-bracket" class="w-4 h-4 text-yellow-600" />
                      <span class="font-medium">API 访问权限</span>
                    </div>
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
                
                <!-- 优先体验 -->
                <tr class="hover:bg-yellow-50/30 dark:hover:bg-yellow-900/10 transition-colors bg-yellow-50/20 dark:bg-yellow-900/5">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">
                    <div class="flex items-center gap-2">
                      <Icon name="heroicons:sparkles" class="w-4 h-4 text-yellow-600" />
                      <span class="font-medium">优先体验新功能</span>
                    </div>
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
                
                <!-- 数据导出 -->
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors">
                  <td class="py-4 px-6 text-gray-900 dark:text-white">导出工具列表</td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:x-circle" class="w-6 h-6 text-gray-400 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                  <td class="text-center py-4 px-6">
                    <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-500 mx-auto" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- 套餐卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
        <div
          v-for="plan in plans"
          :key="`${plan.type}-${plan.duration}`"
          :class="[
            'card p-8 relative transition-all duration-300 overflow-visible',
            plan.type === 'premium' && plan.duration === 12
              ? 'border-2 border-primary-600 lg:scale-105 shadow-2xl shadow-primary-500/30'
              : 'hover:shadow-xl hover:-translate-y-1',
            isCurrentPlan(plan) ? 'ring-2 ring-green-500 ring-offset-4 dark:ring-offset-gray-900' : '',
            isPlanIncluded(plan) ? 'opacity-60' : ''
          ]"
        >
          <!-- 推荐标签 -->
          <div
            v-if="plan.type === 'premium' && plan.duration === 12"
            class="absolute -top-5 left-1/2 transform -translate-x-1/2 z-10"
          >
            <span class="bg-gradient-to-r from-amber-500 to-orange-600 text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg flex items-center gap-1">
              <Icon name="heroicons:fire" class="w-4 h-4" />
              最划算
            </span>
          </div>

          <!-- 当前套餐标签 -->
          <div v-if="isCurrentPlan(plan)" class="absolute -top-3 right-4 z-10">
            <span class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-1.5 rounded-full text-xs font-bold shadow-lg">
              当前套餐
            </span>
          </div>

          <!-- 已包含标签 -->
          <div v-if="isPlanIncluded(plan)" class="absolute -top-3 right-4 z-10">
            <span class="bg-gradient-to-r from-blue-500 to-cyan-600 text-white px-4 py-1.5 rounded-full text-xs font-bold shadow-lg flex items-center gap-1">
              <Icon name="heroicons:check-circle" class="w-3 h-3" />
              已包含
            </span>
          </div>

          <!-- 套餐名称 -->
          <div class="flex items-center gap-2 mb-4">
            <div :class="[
              'w-12 h-12 rounded-xl flex items-center justify-center',
              plan.type === 'premium' ? 'bg-gradient-to-br from-primary-500 to-purple-600' : 'bg-gradient-to-br from-gray-400 to-gray-600'
            ]">
              <Icon 
                :name="plan.type === 'premium' ? 'heroicons:sparkles' : 'heroicons:star'" 
                class="w-6 h-6 text-white"
              />
            </div>
            <h3 class="text-2xl font-bold">{{ plan.name }}</h3>
          </div>
          
          <!-- 价格 -->
          <div class="mb-6">
            <div class="flex items-baseline gap-1">
              <span class="text-5xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-700 dark:from-white dark:to-gray-300">
                ¥{{ plan.price }}
              </span>
              <span class="text-gray-500 dark:text-gray-400 text-sm">
                / {{ plan.duration }}个月
              </span>
            </div>
            <div v-if="plan.duration > 1" class="mt-1 text-sm text-green-600 dark:text-green-400 font-medium">
              平均 ¥{{ Math.round(plan.price / plan.duration) }}/月
            </div>
          </div>

          <!-- 特性列表 -->
          <ul class="space-y-3 mb-8">
            <li
              v-for="(feature, index) in plan.features"
              :key="index"
              class="flex items-start gap-3 group"
            >
              <div class="flex-shrink-0 w-5 h-5 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center mt-0.5">
                <Icon
                  name="heroicons:check"
                  class="w-3 h-3 text-green-600 dark:text-green-400"
                />
              </div>
              <span class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed group-hover:text-gray-900 dark:group-hover:text-white transition-colors">
                {{ feature }}
              </span>
            </li>
          </ul>

          <!-- 购买按钮 -->
          <button
            @click="handleSubscribe(plan)"
            :disabled="isButtonDisabled(plan)"
            :class="[
              'w-full py-3 rounded-lg font-medium transition-all',
              isButtonDisabled(plan)
                ? 'bg-gray-300 dark:bg-gray-700 text-gray-500 dark:text-gray-400 cursor-not-allowed'
                : canUpgrade(plan)
                ? 'bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white shadow-lg hover:shadow-xl'
                : plan.type === 'premium'
                ? 'btn-primary'
                : 'btn-secondary'
            ]"
          >
            <span class="flex items-center justify-center gap-2">
              <template v-if="canUpgrade(plan)">
                <Icon name="heroicons:arrow-up" class="w-4 h-4" />
                {{ getButtonText(plan) }}
              </template>
              <template v-else>
                {{ getButtonText(plan) }}
              </template>
            </span>
          </button>
        </div>
      </div>

      <!-- FAQ -->
      <div class="mt-20 max-w-3xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12">常见问题</h2>
        
        <div class="space-y-6">
          <div class="card p-6">
            <h3 class="font-semibold text-lg mb-2">如何支付？</h3>
            <p class="text-gray-600 dark:text-gray-400">
              我们支持微信支付，购买后会员权益立即生效。
            </p>
          </div>

          <div class="card p-6">
            <h3 class="font-semibold text-lg mb-2">可以取消订阅吗？</h3>
            <p class="text-gray-600 dark:text-gray-400">
              会员订阅为一次性付费，在有效期内可随时使用所有会员功能。到期后如不续费，将自动降级为免费用户。
            </p>
          </div>

          <div class="card p-6">
            <h3 class="font-semibold text-lg mb-2">是否支持退款？</h3>
            <p class="text-gray-600 dark:text-gray-400">
              如遇到技术问题导致无法使用会员功能，请联系客服，我们会根据实际情况处理退款。
            </p>
          </div>

          <div class="card p-6">
            <h3 class="font-semibold text-lg mb-2">会员权益有哪些？</h3>
            <p class="text-gray-600 dark:text-gray-400">
              基础会员：无广告、收藏100个工具、高级搜索、工具对比。<br>
              高级会员：包含基础会员所有功能，外加无限收藏、AI推荐、独家资源、优先客服。
            </p>
          </div>

          <div class="card p-6">
            <h3 class="font-semibold text-lg mb-2">可以升级套餐吗？</h3>
            <p class="text-gray-600 dark:text-gray-400">
              可以！基础会员可以随时升级到高级会员。高级会员已包含基础会员的所有功能，因此无需降级。升级时只需补差价即可。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { SubscriptionPlan } from '~/types'

const authStore = useAuthStore()

// 套餐数据（从后端获取）
const { data: plans } = await useAsyncData<SubscriptionPlan[]>('subscriptionPlans', async () => {
  const { $api } = useNuxtApp()
  return await $api('/subscriptions/plans')
})

/**
 * 检查是否为当前套餐
 */
const isCurrentPlan = (plan: SubscriptionPlan) => {
  if (!authStore.isLoggedIn || !authStore.user) return false
  
  const user = authStore.user
  // 检查订阅类型是否匹配（忽略duration，只要类型匹配即可）
  return user.subscriptionType === plan.type
}

/**
 * 检查套餐是否已包含（比如高级会员已经包含基础会员）
 */
const isPlanIncluded = (plan: SubscriptionPlan) => {
  if (!authStore.isLoggedIn || !authStore.user) return false
  
  const user = authStore.user
  // 如果用户是高级会员，基础会员套餐已被包含
  if (user.subscriptionType === 'premium' && plan.type === 'basic') {
    return true
  }
  return false
}

/**
 * 检查是否可以升级
 */
const canUpgrade = (plan: SubscriptionPlan) => {
  if (!authStore.isLoggedIn || !authStore.user) return false
  
  const user = authStore.user
  // 基础会员可以升级到高级会员
  if (user.subscriptionType === 'basic' && plan.type === 'premium') {
    return true
  }
  return false
}

/**
 * 获取按钮文本
 */
const getButtonText = (plan: SubscriptionPlan) => {
  if (isCurrentPlan(plan)) {
    return '续费'
  }
  if (isPlanIncluded(plan)) {
    return '已包含'
  }
  if (canUpgrade(plan)) {
    return '立即升级'
  }
  return '立即订阅'
}

/**
 * 检查按钮是否应该禁用
 */
const isButtonDisabled = (plan: SubscriptionPlan) => {
  // 如果套餐已被包含，禁用按钮
  return isPlanIncluded(plan)
}

/**
 * 格式化日期
 */
const formatDate = (date?: string) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

/**
 * 处理订阅
 */
const handleSubscribe = async (plan: SubscriptionPlan) => {
  // 检查是否登录
  if (!authStore.isLoggedIn) {
    navigateTo('/login?redirect=/pricing')
    return
  }

  // 跳转到创建订单页面
  navigateTo(`/order/create?planType=${plan.type}&duration=${plan.duration}`)
}

// SEO配置
const config = useRuntimeConfig()
const siteUrl = config.public.siteUrl || 'http://localhost:3000'

const title = '会员价格 - DevToolsHub | 开发者工具导航会员套餐'
const description = '查看 DevToolsHub 会员套餐价格，包括基础会员和高级会员。解锁会员专属工具、无广告浏览、无限收藏、专属客服等更多功能，提升开发效率。'

useHead({
  title,
  meta: [
    { name: 'description', content: description },
    { name: 'keywords', content: 'DevToolsHub会员,会员价格,会员套餐,开发工具会员,高级会员,基础会员' },
    
    // Open Graph
    { property: 'og:type', content: 'website' },
    { property: 'og:title', content: title },
    { property: 'og:description', content: description },
    { property: 'og:url', content: `${siteUrl}/pricing` },
    
    // Twitter Card
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:title', content: title },
    { name: 'twitter:description', content: description },
  ],
  link: [
    { rel: 'canonical', href: `${siteUrl}/pricing` },
  ],
})
</script>

